# 前言

<Suspense> 是一个内置组件，用来在组件树中协调对异步依赖的处理。可以帮助我们更好的完成组件树父组件对子组件的多个嵌套异步依赖关系的管理，当父组件处于等待中时，允许我们自定挂载一个加载中状态。

上图中，红色字体代表的是组件有异步的 setup() 。通过 <Suspense> 组件我们可以很容易实现在组件异步加载时统一展示加载中状态，在所有组件完成加载时，再统一展示：

html
复制代码<Suspense>
  <!-- 具有深层异步依赖的组件 -->
  <Dashboard />

  <!-- 在 #fallback 插槽中显示 “正在加载中” -->
  <template #fallback>
    Loading...
  </template>
</Suspense>

@前端进阶之旅: 代码已经复制到剪贴板

接下来我们将深度解读 <Suspense> 组件实现的原理。

# Suspense 挂载

<Suspense> 组件和所有内置组件一样，也是有初始化挂载的过程，先来看看 Vue 对 <Suspense> 组件的源码定义：

export const SuspenseImpl = {
  name: 'Suspense',
  // Suspense 组件标识符
  __isSuspense: true,
  process(...) {
    if (n1 == null) {
      // 初始化挂载的逻辑
    } else {
      // diff 的逻辑
    }
  },
  create: createSuspenseBoundary,
  normalize: normalizeSuspenseChildren
}

@前端进阶之旅: 代码已经复制到剪贴板

process 的执行时机和前面提到的 <Teleport> 组件是一致的，会在 patch 的时候根据组件的 shapeFlag 标志来判断是否需要执行 process 函数的调用。

const patch = (n1, n2, container, anchor, ...) => {
  // ...
  const { type, ref, shapeFlag } = n2
  switch (type) {
    // 根据 type 类型处理
    case Text:
      // 对文本节点的处理
      processText(n1, n2, container, anchor)
      break
    // 这里省略了一些其他节点处理，比如注释、Fragment 节点等等
    // ...
    default:
      // 根据 shapeFlag 来处理
      // ...
      else if (__FEATURE_SUSPENSE__ && shapeFlag & ShapeFlags.SUSPENSE) {
        // 对 Suspense 节点进行处理
        type.process(
          n1,
          n2,
          container,
          anchor,
          parentComponent,
          parentSuspense,
          isSVG,
          slotScopeIds,
          optimized,
          internals
        );
      }
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

接下来，我们着重先来看看 Suspense 的初始化挂载逻辑，这块的代码集中在 mountSuspense 中：

function mountSuspense(vnode, container, anchor, parentComponent, parentSuspense, isSVG, slotScopeIds, optimized, rendererInternals) {
  const {
    p: patch,
    o: { createElement }
  } = rendererInternals
  // 创建隐藏容器，用来实例化挂载 default 插槽内的内容
  const hiddenContainer = createElement('div')
  // 构造一个 suspense 对象，并赋值给 vnode.suspense
  const suspense = (vnode.suspense = createSuspenseBoundary(
    vnode,
    parentSuspense,
    parentComponent,
    container,
    hiddenContainer,
    anchor,
    isSVG,
    slotScopeIds,
    optimized,
    rendererInternals
  ))

  // 离线挂载 default 插槽内的内容
  patch(
    null,
    (suspense.pendingBranch = vnode.ssContent),
    hiddenContainer,
    null,
    parentComponent,
    suspense,
    isSVG,
    slotScopeIds
  )
  // 如果有异步依赖
  if (suspense.deps > 0) {
    // 触发 onPending，onFallback 钩子函数
    triggerEvent(vnode, 'onPending')
    triggerEvent(vnode, 'onFallback')

    // 初始化挂载 fallback 插槽内容
    patch(
      null,
      vnode.ssFallback,
      container,
      anchor,
      parentComponent,
      // fallback tree 不会有 suspense context
      null,
      isSVG,
      slotScopeIds
    )
    // 将 fallback vnode 设置为 activeBranch
    setActiveBranch(suspense, vnode.ssFallback)
  } else {
    // 如果 suspense 没有异步依赖，直接调用 resolve
    suspense.resolve()
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

在开始解读源码之前，我们需要提前认识几个关键变量的含义：

ssContent 代表的是 default 插槽内的内容的 vnode。
ssFallback 代表的是 fallback 插槽内的内容的 vnode。
activeBranch 代表的是当前激活的分支，就是挂载到页面中的 vnode。
pendingBranch 代表的是正处于 pending 状态的分支，一般指还未被激活的 default 插槽内的内容中的 vnode

然后我们再来看一下整个 mountSuspense 的过程，首先会创建一个隐藏的 DOM 元素，该元素将作为 default 插槽内容的初始化挂载容器。然后创建了一个 suspense 变量，该变量内部包含了一些的对 <Suspense> 组件的处理函数：

function createSuspenseBoundary(vnode, parent, parentComponent, container, hiddenContainer, anchor, isSVG, slotScopeIds, optimized, rendererInternals, isHydrating = false) {
  // ...
  const suspense = {
    vnode,
    parent,
    parentComponent,
    isSVG,
    container,
    hiddenContainer,
    anchor,
    deps: 0,
    pendingId: 0,
    timeout: typeof timeout === 'number' ? timeout : -1,
    activeBranch: null,
    pendingBranch: null,
    isInFallback: true,
    isHydrating,
    isUnmounted: false,
    effects: [],

    resolve(resume = false) {
      // ...
    },

    fallback(fallbackVNode) {
      // ...
    },

    move(container, anchor, type) {
      // ...
    },

    next() {
      // ...
    },

    registerDep(instance, setupRenderEffect) {
      // ...
    },

    unmount(parentSuspense, doRemove) {
      // ...
    }
  }

  return suspense
}

@前端进阶之旅: 代码已经复制到剪贴板

可以看到，这个 createSuspenseBoundary 函数本身其实并没有做太多的事情，本质上就是为了构造一个 suspense 对象。

接下来会进入到对 default 容器中的内容进行 patch 的过程。在本课程的第二小节中，我们提到了 patch 函数在进行组件实例化的过程中，会执行 setupStatefulComponent 这个设置并运行副作用渲染函数的方法，之前我们只是介绍了该方法处理同步 setup 的情况，而对于 <Suspense> 组件来说，setup 会返回个 promise。我们再来看看对于这种情况的处理：

function setupStatefulComponent(instance, isSSR) {
  // ...
  // 对于 setup 返回是个 promise 的情况
  if (isPromise(setupResult)) {
    setupResult.then(unsetCurrentInstance, unsetCurrentInstance)
    if (__FEATURE_SUSPENSE__) {
      // 在 suspense 模式下，为实例 asyncDep 赋值为 setupResult
      instance.asyncDep = setupResult
    }
  }
}

@前端进阶之旅: 代码已经复制到剪贴板

可以看到对于 Suspense 组件来说，其中的 default 内容的 setup 如果返回的是个 pormise 对象的话，则会为将 setup 函数执行的结果 setupResult 赋值给实例属性 asyncDep。那 asyncDep 有什么用呢？

在渲染器执行 mountComponent 的时候，如果存在 asyncDep 变量，则会调用 suspense 上的 registerDep 方法，并为 default 中的插槽节点创建了一个占位符：

const mountComponent = (initialVNode, container, anchor, parentComponent, parentSuspense, isSVG, optimized) => {
  // ...
  // 依赖于 suspense 的异步 setup
  if (__FEATURE_SUSPENSE__ && instance.asyncDep) {
    parentSuspense && parentSuspense.registerDep(instance, setupRenderEffect)

    // 为插槽 vnode 创建注释节点
    if (!initialVNode.el) {
      const placeholder = (instance.subTree = createVNode(Comment))
      processCommentNode(null, placeholder, container, anchor)
    }
    return
  }
  // ...
}

@前端进阶之旅: 代码已经复制到剪贴板

这里的 parentSuspense 就是 default 插槽内的第一个父级 suspense 对象。接下来看看 registerDep 的执行逻辑：

这里生成的 deps = 3。

如果正常返回，则会进入到 then 的处理逻辑中，这里的处理主要做了以下几件事儿：

接下来，我们看看这个 resolve 到底做了哪些事：

# 前言

# Suspense 挂载

# 总结

内置组件-Suspense 原理与异步|Vue3原理

内置组件-Suspense 原理与异步|Vue3原理